<template name="work">
	<view class="bg-white" >
		<cu-custom :bgColor="NavBarColor" backRouterName="index">
			<block slot="backText">返回</block>
			<block slot="content">工单列表</block>
		</cu-custom>
		<view class="search-container-outer">
			<view class="search-container">
				<input 
				class="search-input" v-model="searchInput"
				type="text" style="height: 38px;"
				placeholder="请输入车牌号" 
				/>
				<view class="search-icon" @click="onSearchInput">
					<text>🔍</text>
				</view>
			</view>
		</view>

		<view class="container">
			<!-- <input type="text" placeholder="请输入搜索内容" @input="onSearchInput" /> -->
			
			  <view class="solid-bottom">
			
			  	<scroll-view scroll-x class="scroll-view">
			  		<!-- <view class="flex text-center justify-around"> -->
			  			<view class="item" :class="item.value==TabCur?'text-blue cur':''" v-for="(item,index) in tabs" :key="index" @tap="tabSelect" :data-id="item.value">
			  				<text v-if="item.value==0">{{item.title}}({{dataCount0}})</text>
			  				<text v-if="item.value==3">{{item.title}}({{dataCount3}})</text>
			  				<text v-if="item.value==15">{{item.title}}({{dataCount15}})</text>
			  				<text v-if="item.value==16">{{item.title}}({{dataCount16}})</text>
			  				<text v-if="item.value==17">{{item.title}}({{dataCount17}})</text>
			  				<text v-if="item.value==9">{{item.title}}({{dataCount9}})</text>
			  				<text v-if="item.value==12">{{item.title}}({{dataCount12}})</text>
			  				<text v-if="item.value==13">{{item.title}}({{dataCount13}})</text>
			  			</view>
			  		<!-- </view> -->
			  	</scroll-view>
			  </view>
			 <mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="top"  @down="downCallback"  @up="upCallback">
				<!-- 数据列表 -->
				<view class="al-list cu-list">
					<view class="message_text bg-white cu-item flex justify-around align-center solid-bottom margin-bottom-sm margin-top-sm" style="width: 100vw;" v-for="(item,index) in msgList" :key="index" @tap="goAnnotationDetail(item)" :class="modalName=='move-box-'+ index?'move-cur':''"
					  @touchstart="ListTouchStart" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
						<view v-if="isEmail(item)" class="padding-left">
							<view class="cu-avatar radius cuIcon-mail bg-orange" ></view>
						</view>
						<view v-if="item.msgCategory == '1'&&!isEmail(item)" class="padding-left">
							<view class="cu-avatar radius cuIcon-notification bg-orange" ></view>
						</view>
						<view v-if="item.msgCategory == '2'&&!isEmail(item)" class="padding-left">
							<view class="cu-avatar radius cuIcon-notice bg-orange" ></view>
						</view>
						<view class="titlePad content" style="height: auto;">
							<view class="flex justify-start text-cut text-lg" style="width:26em;color: #333;font-family: '黑体';">
								<!-- <view class="cu-tag light bg-blue">未读</view>
								<view >
									<text class="cuIcon-title text-red padding-left-sm" style="margin-right: -0.8em;"></text>
								</view> -->
								<view class="padding-left" style="width: 350px;">
									<text class="text-black auto-wrap">{{item.description}} </text>
									<!-- <text class="text-black">{{titleFilter(item.contacts,12)}} </text> -->
								</view>
							</view>
							<view class="flex justify-between margin-top-xs" style="padding-left: 0.8rem;width: 100%;display: flex;">
								<view class="text-lg" style="color: #808080;width: 20%;">
										 车牌号
								</view>
								<view class="text-lg auto-wrap" style="color: #000;width: 80%;margin-right: 46px;">
										 {{ item.licensePlate}}
								</view>
							</view>
							<view class="flex justify-between margin-top-xs" style="padding-left: 0.8rem;width: 100%;display: flex;">
								<view class="text-lg" style="color: #808080;width: 20%;">
										 工单状态
								</view>
								<view class="text-lg auto-wrap" style="color: #000;width: 80%;margin-right: 46px;">
										 {{ item.workOrderStatus_dictText}}
								</view>
							</view>
							<view class="flex justify-between margin-top-xs" style="padding-left: 0.8rem;width: 100%;display: flex;">
								<view class="text-lg" style="color: #808080;width: 20%;">
										 工单类型
								</view>
								<view class="text-lg auto-wrap" style="color: #000;width: 80%;margin-right: 46px;">
										 {{ item.workOrderType_dictText}}
								</view>
							</view>
							<view class="flex justify-between margin-top-xs" style="padding-left: 0.8rem;width: 100%;display: flex;">
								<view class="text-lg" style="color: #808080;width: 20%;">
									 创建人
								</view>
								<view class="text-lg auto-wrap" style="color: #000;width: 80%;margin-right: 46px;">
									 {{ item.createBy}}
								</view>
							</view>
							
							<view class="flex justify-between margin-top-xs" style="padding-left: 0.8rem;width: 100%;display: flex;">
								<view class="text-lg" style="color: #808080;width: 20%;">
										 客户名称
								</view>
								<view class="text-lg auto-wrap" style="color: #000;width: 80%;margin-right: 46px;">
										 {{ item.customerName}}
								</view>
							</view>
							
							<view class="flex justify-between margin-top-xs" style="padding-left: 0.8rem;width: 100%;display: flex;">
								<view class="text-lg" style="color: #808080;width: 20%;">
										 提交时间
								</view>
								<view class="text-lg auto-wrap" style="color: #000;width: 80%;margin-right: 46px;">
										 {{ item.createTime}}
								</view>
							</view>
							
							<view class="flex justify-between margin-top-xs" style="padding-left: 0.8rem;width: 100%;display: flex;">
								<view class="text-lg" style="color: #808080;width: 20%;">
										 联系方式
								</view>
								<view class="text-lg auto-wrap" style="color: #000;width: 80%;margin-right: 46px;display: flex;">
										 {{ item.contacts}} {{ item.telephone}}<image @click="callPhone(item.telephone)" src="../../static/icon/order_tel.png" style="height: 20px; width: 20px;"></image>
								</view>
							</view>
							
							<view class="flex justify-between margin-top-xs" style="padding-left: 0.8rem;width: 100%;display: flex;">
								<view class="text-lg" style="color: #808080;width: 20%;">
									 上门地址
								</view>
								<view class="text-lg auto-wrap" style="color: #000;width: 80%;margin-right: 46px;">
									 {{ item.address}}
								</view>
							</view>
							
							<view class="flex justify-between margin-top-xs" style="padding-left: 0.8rem;width: 100%;display: flex;">
								<view class="text-lg" style="color: #808080;width: 20%;">
										 服务人员
								</view>
								<view class="text-lg auto-wrap" style="color: #000;width: 80%;margin-right: 46px;">
										 {{ item.serviceStaff}}
								</view>
							</view>
			
						</view>
						<!-- <view class="action text-sm" style="color: #aaa;margin-top: -2em;margin-left: -13em;width: 10em;">
							<text >{{formatDate(item.createTime,16)}}</text>
						</view> -->
						<!-- <view class="move">
							<view class="bg-red" style="margin-right: 3em;margin-left: 2px;" @tap.stop="deleteAnnotation(item)">删除</view>
						</view> -->
					</view>
				</view>
			</mescroll-uni>
		</view>

	</view>
</template>

<script>
	const tabs = [{title:'全部',value:0}, {title:'待接单',value:3}, {title:'待预约',value:15}, {title:'待签到',value:16}, {title:'待处理',value:17}, {title:'待审核',value:9}, {title:'待回访',value:12}, {title:'已回访',value:13}];
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
	export default {
		name: 'work',
		props:{
			cur:String,
		},
	    mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabs,
				TabCur: 0,
				scrollLeft: 0,
				NavBarColor:this.NavBarColor,
				upOption:{
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 暂无数据 ~', // 提示
						
					},
					loading:'',
					text:'全部',
					isShowNoMore:false,
					textNoMore:'我是有底线的 >_<'
				},
				msgList: [], //列表数据
			    read: "all",
				announcement1:[],
				msg1Count:"",
				msg1Title:"",
				announcement2:[],
				msg2Count:"",
				msg2Title:"",
				url:"/work/workOrder/list?column=createTime&order=desc",
				delUrl:'/sys/sysAnnouncementSend/delete',
				listTouchStart: 0,
			    modalName: null,
			    listTouchDirection: null,
				dataCount0:0,
				dataCount3:0,
				dataCount15:0,
				dataCount16:0,
				dataCount17:0,
				dataCount9:0,
				dataCount12:0,
				dataCount13:0,
				searchInput: '', // 用户输入的搜索关键词
			}
		},
		onShow() {
			this.getTotal(0);
			this.getTotal(3);
			this.getTotal(15);
			this.getTotal(16);
			this.getTotal(17);
			this.getTotal(9);
			this.getTotal(12);
			this.getTotal(13);
			if(this.mescroll){
				console.log("tabindex==========0000000000")
				this.mescroll.resetUpScroll()
			}
		},
		computed:{
			top() {
				this.onSearchInput()
				return this.CustomBar * 2 + 185;
			},
			style() {
				console.log("tabindex==========")
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			},
		},
		methods: {
			callPhone(phoneNumber) {
				// alert(phoneNumber);
				// console.log('phoneNumber',phoneNumber);
			    uni.makePhoneCall({
			      phoneNumber: phoneNumber, // 电话号码
			      success: function () {
			        console.log('拨号成功');
			      },
			      fail: function () {
			        console.log('拨号失败');
			      }
			    });
			  },
			onSearchInput() {
				this.upOption.page.num=1;
				this.getTotal(0);
				this.getTotal(3);
				this.getTotal(15);
				this.getTotal(16);
				this.getTotal(17);
				this.getTotal(9);
				this.getTotal(12);
				this.getTotal(13);
				this.upCallback(this.upOption.page);
			},
			// unique(arr) {
			//     var obj = {};
			//     return arr.filter(function(item, index, arr){
			//         return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
			//     })
			// },
			upCallback(page) {
				//联网加载数据
				console.log("tabindex",this.TabCur )
			
				let keyword = this.TabCur;
				let licensePlateNo;
				if(this.searchInput){
					licensePlateNo='*'+this.searchInput+'*'
				}
				if(keyword == 0){
					keyword="";
				}
				this.$http.get(this.url,{params:{pageNo: page.num, pageSize:page.size,workOrderStatus: keyword,licensePlate:licensePlateNo}}).then(res=>{
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					this.announcement1 = res.data.result.records
					this.mescroll.endSuccess(this.announcement1.length);
					//console.log("url", res)
					//设置列表数据
					  if (res.data.success) {
						 console.log("res",res.data)
						 this.msg1Title = "通知(" + res.data.result.total + ")";
						for(let annItem of this.announcement1){
							this.msgList.push(annItem)							
						}
					 }
					if(page.num == 1){
						this.msgList = []; //如果是第一页需手动制空列表
						this.msgList = this.msgList.concat(this.announcement1); //追加新数据
					}
					
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			getTotal(keyword) {
				//联网加载数据
				// console.log("tabindex",this.TabCur )
				let idx = keyword;
				let licensePlateNo;
				if(this.searchInput){
					licensePlateNo='*'+this.searchInput+'*'
				}
				if(keyword == 0){
					keyword="";
				}
				this.$http.get(this.url,{params:{pageNo: 1, pageSize:1,workOrderStatus: keyword,licensePlate:licensePlateNo}}).then(res=>{
					//console.log("url", res)
					//设置列表数据
					  if (res.data.success) {
						 console.log("res",res.data)
						 this['dataCount'+idx]=res.data.result.total;
					 }
					
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				console.log("this.TabCurthis.TabCur===",this.TabCur);
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.msgList = []// 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			goAnnotationDetail(item){
				//item.readFlag = '1'
				this.mescroll.resetUpScroll() 
			    if(item.openType=="component" && item.openPage.indexOf('email')>= 0){
					this.goEmailDetailPage(item)
				}else{
					// console.log("detail",encodeURIComponent(JSON.stringify(item)))
					// console.log("detail",item)
					// console.log("detail",JSON.stringify(item))
					this.$Router.push({name:'detail', params:item});
					// uni.navigateTo({
					// 	url: '/pages/work/detail?item='+ encodeURIComponent(JSON.stringify(item))
					// });
				}
			},
			isEmail(item){
				if(item.openType=="component" &&item.openPage.indexOf('email')>=0){
				  return true;
				}else{
				  return false;
				}
		    },
			goEmailDetailPage(item){
				console.log("go",item.anntId)
				console.log("item",item)
				 if(item.readFlag == '0'){
					//item.readFlag = '1'
					this.mescroll.resetUpScroll() 
					let readUrl = '/sys/sysAnnouncementSend/editByAnntIdAndUserId';
					this.$http.put(readUrl,{anntId:item.anntId})					
				}
				// console.log("goe",item.busId)
				
				uni.navigateTo({
					url: '/pages/mail/mailDetail?id='+item.busId
				});
				
			},
			ListTouchStart(e) {
				console.log("tabindex==========44444444")
				console.log("tabindex==========44444444",e.touches[0].pageX)
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				console.log("tabindex==========5555555555")
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				console.log("tabindex==========88888888")
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
				console.log("tabindex==========88888888",this.modalName)
			},
			deleteAnnotation(item) {
				console.log("tabindex==========999999999")
				this.$http.delete(this.delUrl+'?id='+item.id).then(res => {
					console.log("结果数据9", res)
					if (res.data.success) {
						this.mescroll.resetUpScroll() 
					}
				}).catch(e => {
					console.log("al delUrl请求错误2", e)
					this.mescroll.endErr();
				})
			},
			formatDate(text,len){
				console.log("tabindex==========453535353")
				if(!text || text.length==0){
					return ''
				}
				if(text.length<len){
					return text;
				}
				return text.substr(0,len)
			},
			titleFilter(text,len){
				console.log("tabindex==========2323242424")
				if(!text || text.length==0){
					return ''
				}
				if(text.length<len){
					return text;
				}
				return text.substr(0,len)+"..."
			}
			
		}
	}
</script>

<style scoped>
	.e-btn{margin-bottom: 1rem;}

	.titlePad{margin-top:0.6rem;margin-bottom: 1rem;padding-left: 12px;}
	.cu-list>.move-cur{
		transform: translateX(-150rpx);
		
	}
	.nav .cu-item.cur {
		position: flex;
		z-index: 9;
		border-bottom: 4upx solid;
	}
.auto-wrap {
  overflow-wrap: break-word; /* 确保在单词边界上换行 */
  word-wrap: break-word; /* 兼容旧版浏览器 */
  white-space: normal; /* 允许换行 */
}
	.scroll-view {
	  white-space: nowrap;
	  width: 100%;
	}
	 
	.item {
	  display: inline-block;
	  width: 90px;
	  height: 45px;
	  background-color: #f0f0f0;
	  /* margin-right: 10px; */
	  line-height: 45px;
	  text-align: center;
	}
	
	.scroll-view .item.cur {
		position: flex;
		z-index: 9;
		border-bottom: 4upx solid;
	}
	.search-container-outer {
		background-color: white;
		padding: 16rpx;
	}
	
	.search-container {
	  display: flex;
	  align-items: center;
	  background-color: #f0f0f0;
	  border-radius: 20px;
	  /* padding: 3px; */
	  margin-bottom: 2px;
	}
	 
	.search-input {
	  flex: 1;
	  padding: 10px;
	  border: none;
	  outline: none;
	  font-size: 16px;
	}
	 
	.search-icon {
	  /* margin-left: 10px; */
	  padding: 0 24rpx;
	  font-size: 18px;
	}
</style>
